<template>
	<view>
		<view class="special_container">
			<view class="special-header">
				<image src="https://oss.laiba.shop/system/NewShop/nine_yuan_bg.jpg" mode=""></image>
			</view>
			<view class="goods-container" ref="header" v-show="flag">
				
				<view class="goods-list">
					<view :class="['goods-header', scrollTop > offsetTop ? 'fixed' : '']">
						<view :class="['nav-item', {'active': index === currentIndex}]" v-for="(item, index) in priceItems" :key="item.id" @click="addActive(index)">{{item.name}}</view>
						<!-- <view class="nav-item">19元</view>
						<view class="nav-item">29元</view>
						<view class="nav-item">49元</view>
						<view class="nav-item">99元</view> -->
					</view>
					<view style="height: 102rpx;" v-show="offsetTop < scrollTop"></view>
					<view class="part-container" ref="part">
						<view class="part_1">
							<view class="part-item" v-for="item in goods_9y" :key="item.id" @click="navTo(item)">
								<!-- <image :src="item.thumb" mode="" class="img"></image> -->
								<easy-loadimage :image-src="item.thumb" class="img" :open-transition="true" :scroll-top="scrollTop"></easy-loadimage>
								<view class="part-info">
									<view class="title">{{ item.title }}</view>
									<view class="price">
										<view style="display: flex;flex: 1;align-items: center;">
											<text style="font-size: 30rpx;color: #e00b2c;">￥<text style="font-size: 44rpx;">{{ item.marketprice }}</text></text>
											<text style="font-size: 22rpx;color: #999999;padding: 14rpx 0 0 10rpx;text-decoration: line-through;">{{ item.productprice | addRMB }}</text>
										</view>
										<view class="btn">加购物袋</view>
									</view>
								</view>
							</view>
							
						</view>
						<view class="part_2">
							<view class="part-item" v-for="item in goods_19y" :key="item.id" @click="navTo(item)">
								<!-- <image :src="item.thumb" mode="" class="img"></image> -->
								<easy-loadimage :image-src="item.thumb" class="img" :open-transition="true" :scroll-top="scrollTop"></easy-loadimage>
								<view class="part-info">
									<view class="title">{{ item.title }}</view>
									<view class="price">
										<view style="display: flex;flex: 1;align-items: center;">
											<text style="font-size: 30rpx;color: #e00b2c;">￥<text style="font-size: 44rpx;">{{ item.marketprice }}</text></text>
											<text style="font-size: 22rpx;color: #999999;padding: 14rpx 0 0 10rpx;text-decoration: line-through;">{{ item.productprice | addRMB }}</text>
										</view>
										<view class="btn">加购物袋</view>
									</view>
								</view>
							</view>
							
						</view>
						<view class="part_3">
							<view class="part-item" v-for="item in goods_29y" :key="item.id" @click="navTo(item)">
								<!-- <image :src="item.thumb" mode="" class="img"></image> -->
								<easy-loadimage :image-src="item.thumb" class="img" :open-transition="true" :scroll-top="scrollTop"></easy-loadimage>
								<view class="part-info">
									<view class="title">{{ item.title }}</view>
									<view class="price">
										<view style="display: flex;flex: 1;align-items: center;">
											<text style="font-size: 30rpx;color: #e00b2c;">￥<text style="font-size: 44rpx;">{{ item.marketprice }}</text></text>
											<text style="font-size: 22rpx;color: #999999;padding: 14rpx 0 0 10rpx;text-decoration: line-through;">{{ item.productprice | addRMB}}</text>
										</view>
										<view class="btn">加购物袋</view>
									</view>
								</view>
							</view>
							
						</view>
						<view class="part_4">
							<view class="part-item" v-for="item in goods_49y" :key="item.id" @click="navTo(item)">
								<!-- <image :src="item.thumb" mode="" class="img"></image> -->
								<easy-loadimage :image-src="item.thumb" class="img" :open-transition="true" :scroll-top="scrollTop"></easy-loadimage>
								<view class="part-info">
									<view class="title">{{ item.title }}</view>
									<view class="price">
										<view style="display: flex;flex: 1;align-items: center;">
											<text style="font-size: 30rpx;color: #e00b2c;">￥<text style="font-size: 44rpx;">{{ item.marketprice }}</text></text>
											<text style="font-size: 22rpx;color: #999999;padding: 14rpx 0 0 10rpx;text-decoration: line-through;">{{ item.productprice | addRMB}}</text>
										</view>
										<view class="btn">加购物袋</view>
									</view>
								</view>
							</view>
							
						</view>
						<view class="part_5">
							<view class="part-item" v-for="item in goods_99y" :key="item.id" @click="navTo(item)">
								<!-- <image :src="item.thumb" mode="" class="img"></image> -->
								<easy-loadimage :image-src="item.thumb" class="img" :open-transition="true" :scroll-top="scrollTop"></easy-loadimage>
								<view class="part-info">
									<view class="title">{{ item.title }}</view>
									<view class="price">
										<view style="display: flex;flex: 1;align-items: center;">
											<text style="font-size: 30rpx;color: #e00b2c;">￥<text style="font-size: 44rpx;">{{ item.marketprice }}</text></text>
											<text style="font-size: 22rpx;color: #999999;padding: 14rpx 0 0 10rpx;text-decoration: line-through;">{{ item.productprice | addRMB}}</text>
										</view>
										<view class="btn">加购物袋</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<!-- <view style="height: 60rpx;background-color: #375077;"></view> -->
			</view>
			<view class="code-l" @click.stop="goBack">
				<view class="iconfont icon-zuo"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import easyLoadimage from '../../components/easy-loadimage.vue'
	import { getProHot } from '../../api/index.js'
	export default {
		data() {
			return {
				priceItems: [
					{
						id: 1,
						name: '9元'
					},
					{
						id: 2,
						name: '19元'
					},
					{
						id: 3,
						name: '29元'
					},
					{
						id: 4,
						name: '49元'
					},
					{
						id: 5,
						name: '99元'
					}
				],
				currentIndex: 0,
				scrollTop:　0,
				offsetTop: 0,
				part_1: 0,
				part_2: 0,
				part_3: 0,
				part_4: 0,
				part_5: 0,
				goods_9y: [],
				goods_19y: [],
				goods_29y: [],
				goods_49y: [],
				goods_99y: [],
				flag: false
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop)
			this.scrollTop = e.scrollTop
			this.scroll()
		},
		onLoad() {
			this._getProHot() //获取产品信息 19元的 和 热卖产品
		},
		methods: {
			navTo(data) {
				// console.log(data)
				window.location.href = data.url
			},
			goBack() {
				uni.switchTab({
				    url: '/pages/shopping/NewShopping'
				});
			},
			scroll() {
				if (this.scrollTop <= this.part_2) {
					this.currentIndex = 0
				} else if (this.scrollTop <= this.part_3) {
					this.currentIndex = 1
				} else if (this.scrollTop <= this.part_4) {
					this.currentIndex = 2
				} else if (this.scrollTop <= this.part_5) {
					this.currentIndex = 3
				} else {
					this.currentIndex = 4
				}
			},
			_getProHot() {
				uni.showLoading({
					title: '加载中...'
				})
				getProHot({}, (res) => {
					console.log("获取成功")
					console.log(res)
					console.log("获取成功")
					if (res.code === 3) {
						uni.hideLoading()
						uni.showToast({
				　　　　　　 title: res.message,
				　　　　　　 icon: 'none'
				　　　　 })
						let url = encodeURIComponent(`https://mobile.laiba.shop/html/#/pages/shopping/shopping`)
						window.location.href = 'https://mobile.laiba.shop/activity/visitor/auth?url=' + url
					} else {
						this.goods_9y = res.goods.goods_9y
						this.goods_19y = res.goods.goods_19y
						this.goods_29y = res.goods.goods_29y
						this.goods_49y = res.goods.goods_49y
						this.goods_99y = res.goods.goods_99y
						this.flag = true
						uni.hideLoading()
					}
				})
			},
			addActive(index) {
				this.currentIndex = index
				switch (index) {
					case 0:
						console.log(this.part_1)
						window.scrollTo(0, this.part_1 + 5)
						break
					case 1:
						console.log(this.part_2)
						window.scrollTo(0, this.part_2 + 5)
						break
					case 2:
						console.log(this.part_3)
						window.scrollTo(0, this.part_3 + 5)
						break
					case 3:
						console.log(this.part_4)
						window.scrollTo(0, this.part_4 + 5)
						break
					case 4:
						console.log(this.part_5)
						window.scrollTo(0, this.part_5 + 5)
						break
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				setTimeout(() => {
					const goodsContainer = this.$refs.header.$el.offsetTop // 正值
					const positionWidth = this.$refs.header.$el.children[0].offsetTop // 负值
					this.offsetTop = goodsContainer + positionWidth
					// 获取9,19,29 ...盒子高度
					const header = this.$refs.header.$el.children[0].children[0].offsetHeight // 这两个一样的
					// const header = document.querySelector('.goods-list .goods-header').offsetHeight // 这两个一样的
					// console.log(header)
					this.part_1 = goodsContainer + this.$refs.part.$el.children[0].offsetTop + positionWidth - header + 1
					this.part_2 = goodsContainer + this.$refs.part.$el.children[1].offsetTop + positionWidth - header + 1
					this.part_3 = goodsContainer + this.$refs.part.$el.children[2].offsetTop + positionWidth - header + 1
					this.part_4 = goodsContainer + this.$refs.part.$el.children[3].offsetTop + positionWidth - header + 1
					this.part_5 = goodsContainer + this.$refs.part.$el.children[4].offsetTop + positionWidth - header + 1
					// console.log(this.part_1)
					// console.log(this.part_2)
					// console.log(this.part_3)
					// console.log(this.part_4)
					// console.log(this.part_5)
				}, 2000)
			})
		},
		components: {
			easyLoadimage
		}
	}
</script>

<style lang="scss" scoped>
	.special_container {
		background-color: #375077;
		.special-header {
			image {
				width: 100%;
				height: 690rpx;
			}
		}
		.goods-container {
			width: 698rpx;
			margin: 0 auto;
			position: relative;
			.goods-list {
				background-color: #fff;
				border-radius: 10rpx;
				position: absolute;
				top: -380rpx;
				left: 0;
				width: 100%;
				padding: 0 26rpx 40rpx;
				margin-bottom: 40rpx;
				.goods-header {
					height: 102rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.nav-item {
						width: 109rpx;
						height: 44rpx;
						border-radius: 22rpx;
						font-family: PingFangSC-Regular;
						font-size: 28rpx;
						color: #1a1a1a;
						text-align: center;
						line-height: 44rpx;
					}
					.active {
						background-color: #2c459f;
						color: #fff;
					}
				}
				.fixed {
					justify-content: space-around;
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					background-color: #fff;
					transition: all .2s ease;
					z-index: 999;
				}
				.part-container {
					.part_1,.part_2,.part_3,.part_4,.part_5 {
						.part-item {
							height: 250rpx;
							border-top: 1rpx solid #e2e2e2;
							// border-bottom: 1rpx solid #e2e2e2;
							display: flex;
							align-items: center;
							.img {
								width: 160rpx;
								height: 160rpx;
								border-radius: 4rpx;
								margin-left: 2rpx;
							}
							.part-info {
								margin-left: 32rpx;
								.title {
									margin-bottom: 30rpx;
									font-family: PingFangSC-Regular;
									font-size: 28rpx;
									color: #1a1a1a;
									width: 424rpx;
									height: 80rpx;
									text-overflow: -o-ellipsis-lastline;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									white-space: normal;
								}
								.price {
									display: flex;
									align-items: flex-end;
									position: relative;
									.btn {
										font-family: SourceHanSansCN-Regular;
										font-size: 26rpx;
										color: #fff;
										width: 140rpx;
										height: 50rpx;
										background-color: #e00b2c;
										border-radius: 25rpx;
										line-height: 50rpx;
										text-align: center;
										position: absolute;
										right: -30rpx;
										top: 12rpx;
									}
								}
							}
						}
					}
					.part_5 {
						.part-item:last-child {
							border-bottom: 1rpx solid #e2e2e2;
						}
					}
				}
			}
			.top {
				top: -156rpx !important;
			}
		}
		.code-l {
			width: 75rpx;
			height: 75rpx;
			background-color: #000;
			opacity: 0.3;
			border-radius: 50%;
			position: fixed;
			right: 10px;
			bottom: 100px;
			.icon-zuo {
				text-align: center;
				line-height: 75rpx;
				color: #fff;
				font-weight: 800;
			}
		}
	}
</style>
